<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/contractList">合约列表&nbsp;&nbsp;>&nbsp;</router-link>
        <span>退单</span>
      </p>
      <table>
        <thead>
          <tr>
            <td>名称</td>
            <td>金额</td>
            <td>到手总算力</td>
            <td>合约期限</td>
            <td>状态</td>
            <td>开挖时间</td>
            <td>下单时间</td>
            <td>锁定时间</td>
          </tr>
        </thead>
        <tbody>
         <tr>
           <th>
             <span>{{machine.productName}}</span>
           </th>
           <th>
             <span>{{machine.state2 == 2 ? machine.continueTotalDeposit : machine.totalDeposit}}{{machine.payUnitName}}</span>
           </th>
           <th>
             <span class="pointer" @mouseenter="showItem1(machine , $event)" @mouseout="showWin1 = false">
               {{machine.handsPower}}T
             </span>
           </th>
           <th><span>{{machine.regularDateNum}}天</span></th>
           <th><span>{{machine.workText}}</span></th>
           <th><span>{{machine.startTime}}</span></th>
           <th><span>{{machine.operateTime}}</span></th>
           <th><span>{{machine.endTime}}</span></th>
         </tr>
        </tbody>
      </table>
    </section>
    <section id="sec2">
      <p class="p1">
        <span class="title">退单份数：</span>
      </p>
      <p class="p2">
        <input type="number" placeholder="请输入退单份数" v-model="num" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
      </p>
      <p class="p3">
        <span class="title">持有算力份数：{{machine.num}}份</span>
      </p>
<!--      <div class="d4">-->
<!--        <span class="title">退单方式：</span>-->
<!--        <div class="returnType">-->
<!--          <label for="returnCNY">-->
<!--            <input type="radio" value="CNY" v-model="returnType" id="returnCNY">-->
<!--            <span>现金余额</span>-->
<!--          </label>-->
<!--        </div>-->
<!--      </div>-->
      <p class="p5">
        <span class="title">退单金额：</span>
        <span class="right">{{returnMoney}}{{priceUnit}}</span>
      </p>
      <p class="p6">
        <button @click="sub">立即退单</button>
      </p>
    </section>
    <!--展示算力包的power信息-->
    <div class="abWin" v-if="showWin1" :style="win1Style">
      <span class="top">
        <span>总算力</span>
        <span>{{win1Data.totalPower}}T</span>
      </span>
      <span class="line">
        <span>
          <span class="left">基础算力</span>
          <span class="right">{{win1Data.basePower}}T</span>
        </span>
        <span>
          <span class="left">浮动算力</span>
          <span class="right">{{win1Data.floatPower}}T</span>
        </span>
        <span>
          <span class="left">达标算力</span>
          <span class="right">{{win1Data.standardPower}}T</span>
        </span>
        <span>
          <span class="left">期货算力</span>
          <span class="right">{{win1Data.futuresPower}}T</span>
        </span>
        <span>
          <span class="left">定期算力</span>
          <span class="right">{{win1Data.regularPower}}T</span>
        </span>
        <span>
          <span class="left">邀请算力</span>
          <span class="right">{{win1Data.invitePower}}T</span>
        </span>
      </span>
    </div>
    <!--确认退单弹窗-->
    <confirm-dialog ref="cfDl" cfTitle="退单提示" @confirm="confirmReturn"></confirm-dialog>
  </div>
</template>
<script>
  import { orderDetail , orderReturn } from '../http/api';
  export default {
    name : 'returnOrder',
    inject : ['reload'] ,
    data(){
      return{
        orderId : null,//矿机订单id
        machine : {}, //矿机信息
        win1Data : {
          totalPower : 0,
          basePower : 0 ,
          floatPower : 0,
          standardPower : 0,
          futuresPower : 0,
          regularPower : 0,
          invitePower : 0,
        },//弹窗1数据
        showWin1 : false,//显示弹窗1
        win1Style : {left : 0 ,right : 0}, //弹窗1位置
        returnType : 'CNY',
        num : null,//退单分数
        returnMoney : null , //退单金额
        unitPrice : null,//单价
        priceUnit : null,
        sliceAccount : 4,
        /*------选择续单后信息------*/
        // handsPower : 0,//到手总算力
        // lockTime : '--' , //锁定时间
        // newFloatPower : 0 ,
        // newRegularNum : 0,
        // /*------余额------*/
        // myMoney : 0,
        // myUsdt : 0,
      }
    },
    mounted() {
      let query =  this.$route.query;
      let orderId = query.orderId;
      if(!orderId){
        require('../common/js/toast').toast('页面地址未传入订单id');
        this.$router.go(-1);
        return;
      }
      this.orderId = orderId;
      this.loadPage();
    },
    components:{
      ConfirmDialog : resolve => { require(['../components/ConfirmDialog'], resolve) },/*确认弹窗*/
    },
    watch:{
      num(num){
        let thiz = this;
        let machine = this.machine;
        num = num || 1;
        if(num >= machine.num){
          num = machine.num;
          this.num = machine.num;
          this.returnMoney = this.totalRentMoney;
        }else{
          this.returnMoney = thiz.numSlice( thiz.accMul(num, thiz.unitPrice) , thiz.sliceAccount);
        }
      },
    },
    methods:{
      loadPage(){
        let thiz = this;
        let https = [
          orderDetail({orderId : this.orderId , noLoading : true}).then(res => {
            if(res.code == 200){
              let data = res.data;
              data.payUnitName = data.paymentCurrencyCode == "BCNY" ? "OTC余额" : data.paymentCurrencyCode;//金额单位名称
              let win1Data = this.getPbHandPower(data);
              data.handsPower = win1Data.totalPower;
              thiz.machine = data;
              thiz.priceUnit = data.rawPaymentCurrencyCode == "BCNY" ? "CNY" : data.rawPaymentCurrencyCode;
              thiz.unitPrice = thiz.accDiv(data.totalDeposit, data.num);
              let totalRentMoney = data.state2 == 2 ? data.continueTotalDeposit : data.totalDeposit;
              let sliAccount = 4;
              if( thiz.priceUnit == 'CNY' || thiz.priceUnit == 'BCNY'){
                sliAccount = 2;
              }
              this.sliceAccount = sliAccount;
              thiz.totalRentMoney = thiz.numSlice( totalRentMoney , sliAccount);
              this.num = 1;
            }
            return res;
          })
        ];
        this.PromiseAll(https , res => {
          thiz.checkedDaysIndex = 0;
        });
      },
      getPbHandPower(item){
        //获取普通的合约包到手算力
        let win1Data = {
          //totalPower : this.accMoreMul(item.basePower , item.num),
          basePower : this.accMoreMul(item.basePower , item.num), //基础算力
          floatPower : this.accMoreMul(item.floatPower, item.num),//浮动
          standardPower : this.accMoreMul(item.pePower || 0, item.num),//达标
          futuresPower : this.accMoreMul(item.futuresPower, item.num),//期货
          regularPower : this.accMoreMul(item.regularPower, item.num),//定期
          invitePower : 0,//邀请
        };
        let result = 0 , thiz = this;
        this.for(win1Data , ( item , key ) => {
          result = thiz.accAddMore( result , item);
        });
        win1Data.totalPower = result;
        return win1Data;
      },
      showItem1(item , e ){
        let x = e.clientX;
        let y = e.clientY;
        this.win1Style = {left : x+20+'px' , top : y-30 +'px'};
        this.win1Data = this.getPbHandPower(item);
        this.showWin1 = true;
      },
      sub(){
        if(!(this.num)){
          require('../common/js/toast').toast('请输入退单份数');
          return;
        }
        let toast = `您确定退${this.num}份合约吗？`;
        this.$refs.cfDl.changeToast(toast);
        this.$refs.cfDl.dialogShow();
      },
      confirmReturn(){
        let param = {
          orderId: this.orderId,
          num: this.num
        };
        orderReturn(param).then(res => {
          if(res.code == 200){
            require('../common/js/toast').toast('退单成功');
          }
        });
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    >table{
      width: 100%;text-align: left;margin-top: 15px;
      th{
        font-weight: 500;font-size: 14px;color: #262626;
        >span{
          display: inline-block;height: 100%;
        }
      }
      >thead{
        color: #999999;font-size: 14px;
        tr>td{
          padding: 25px 0;
          &:last-child{
            text-align: right;
          }
        }
      }
      >tbody{
        th{
          padding: 24px 6px;padding-top: 0px;color: #595959;font-size: 14px;vertical-align: text-top;
        }
        tr>th:first-child{
          max-width: 220px;
        }
        >tr>th:last-child{
          text-align: right;
        }
        .pointer{
          .colorYellow;text-decoration: underline;
          &:hover{
            cursor: pointer;
          }
        }
        .setting{
          >span{
            display: inline-block;width: 100%;text-align: right;margin-top: 15px;
            &:first-child{
              margin-top: 0px;
            }
          }
        }
      }
    }
  }
  #sec2{
    margin-top: 10px;min-height: 560px;
    .title{
      color: #999;font-size: 14px;display: inline-block;min-width: 76px;
    }
    >.p2{
      padding-top: 20px;
      input{
        .input;width: 370px;height: 38px;padding: 0 9px;
      }
    }
    >.p3{
      padding-top: 13px;
      >.title{
        font-size: 12px;
      }
    }
    >.d4{
      overflow: hidden;padding-top: 36px;
      >.title{
        float: left;
      }
      >div{
        float: left;
        >label{
          .radioLabel;
        }
      }
    }
    >.p5{
      padding-top: 32px;
      >.right{
        color: #595959;
      }
    }
    >.p6{
      padding-top: 34px;
      button{
        .submit;width: 160px;height: 38px;line-height: 38px;font-size: 14px;
      }
    }
  }
</style>
